<template>
  <div class="instance-tab">
    <el-tabs v-model="activeName" type="border-card" class="demo-tabs" :stretch="true">
      <el-tab-pane
        v-for="(projectGroup, groupIndex) in projects"
        :key="groupIndex"
        :name="projectGroup.level"
      >
        <template #label>
          <span class="tab-label">
            <el-icon><calendar /></el-icon>
            <span style="margin-left: 10px">{{ projectGroup.level }}</span>
          </span>
        </template>
        <ul>
          <li v-for="(project, projectIndex) in projectGroup.context" :key="projectIndex">
            <el-icon style="margin-right: 5px; margin-left: 15px"><List /></el-icon> {{ project }}
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { useMainContentStore } from '@/stores/mian/content.js'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'
import { Calendar, List } from '@element-plus/icons-vue'

const mainContentStore = useMainContentStore()
const { projects } = storeToRefs(mainContentStore)
const activeName = ref('国家级项目')
</script>

<style scoped lang="scss">
.instance-tab {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  .demo-tabs {
    width: 800px;
    border-radius: 5px;
    .tab-label {
      display: flex;
      margin-left: 10px;
      padding: 32px;
      color: #6b778c;
      font-size: 18px;
      font-weight: 600;
    }
    li {
      margin-top: 10px;
      color: #a1a1a5;
    }
  }
}
</style>
